<script setup lang="ts">
import type { DialogInst } from 'nutui-uniapp'
import { storeToRefs } from 'pinia'
import { reactive, ref } from 'vue'
import { useUserStore } from '@/stores/user'

// 定义页面
definePage({
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '账号管理',
  },
})

// 用户存储
const userStore = useUserStore()
const { readUserInfo } = storeToRefs(userStore)

// 状态参数
const state = reactive({
  form: {
    name: '',
    sex: '',
    phone: '',
  },
  showPopup: false,
})

// 组件
const dialogRef = ref<DialogInst>()
const inputNameRef = ref()
const inputPhoneRef = ref()

// 修改头像
function handleSetAvatar() {
  uni.chooseImage({
    count: 1,
    success: async () => {
      uni.showLoading({
        title: '上传中',
      })
      setTimeout(() => {
        uni.showToast({
          title: '上传成功',
          icon: 'success',
        })
      }, 1000)
    },
  })
}

// 修改信息
function handleShowPopup(type: string) {
  state.form = {
    name: readUserInfo.value.nickname,
    sex: '',
    phone: readUserInfo.value.phone,
  }
  state.showPopup = true
  setTimeout(() => {
    switch (type) {
      case 'name':
        inputNameRef.value.focus()
        break
      case 'phone':
        inputPhoneRef.value.focus()
        break
    }
  }, 1000)
}

// 同步微信
function handleSyncWechat() {
  uni.showModal({
    title: '提示',
    content: '本操作将会同步微信头像与昵称，是否继续？',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({
          title: '正在同步',
        })
        setTimeout(() => {
          uni.showToast({
            title: '同步成功',
            icon: 'success',
          })
        }, 2000)
      }
    },
  })
}

// 退出登录
function handleLogout(confirm: boolean) {
  if (confirm) {
    userStore.clearUserInfo()
    uni.switchTab({
      url: '/pages/mine/index',
    })
  }
  else {
    dialogRef.value?.showDialog({
      title: '系统提示',
      content: '是否退出登录？',
    })
  }
}
</script>

<template>
  <view class="main">
    <nut-cell-group class="no-margin no-radius">
      <nut-cell
        title="头像"
        items-center
        size="large"
        is-link
        @click="handleSetAvatar"
      >
        <template #desc>
          <nut-avatar size="small">
            <image :src="readUserInfo.avatar" />
          </nut-avatar>
        </template>
      </nut-cell>
      <nut-cell
        title="昵称"
        items-center
        size="large"
        is-link
        @click="handleShowPopup('name')"
      >
        <template #desc>
          <text class="text">
            {{ readUserInfo.nickname }}
          </text>
        </template>
      </nut-cell>
      <nut-cell
        title="性别"
        items-center
        size="large"
        is-link
        @click="handleShowPopup('sex')"
      >
        <template #desc>
          <text>未填写</text>
        </template>
      </nut-cell>
      <nut-cell
        title="手机"
        items-center
        size="large"
        is-link
        @click="handleShowPopup('phone')"
      >
        <template #desc>
          <text v-if="readUserInfo.phone" class="text">
            {{ readUserInfo.phone }}
          </text>
          <text v-else>
            未填写
          </text>
        </template>
      </nut-cell>
    </nut-cell-group>
    <view class="footer flex">
      <view class="button flex-1 mr-[10rpx]">
        <nut-button block type="success" @click="handleSyncWechat">
          <template #icon>
            <nut-icon name="download" />
          </template>
          同步微信数据
        </nut-button>
      </view>
      <view class="button flex-1 ml-[10rpx]">
        <nut-button block type="danger" @click="handleLogout(false)">
          退出登录
        </nut-button>
      </view>
    </view>
    <nut-popup v-model:visible="state.showPopup" position="bottom" closeable>
      <view class="title">
        修改信息
      </view>
      <nut-form>
        <nut-form-item label="昵称">
          <nut-input
            ref="inputNameRef"
            v-model="state.form.name"
            class="nut-input-text"
            placeholder="请输入昵称"
            type="text"
          />
        </nut-form-item>
        <nut-form-item label="性别">
          <nut-radio-group v-model="state.form.sex" direction="horizontal">
            <nut-radio label="">
              保密
            </nut-radio>
            <nut-radio label="男">
              男
            </nut-radio>
            <nut-radio label="女">
              女
            </nut-radio>
          </nut-radio-group>
        </nut-form-item>
        <nut-form-item label="手机">
          <nut-input
            ref="inputPhoneRef"
            v-model="state.form.phone"
            class="nut-input-text"
            placeholder="请输入手机"
            type="text"
          />
        </nut-form-item>
        <nut-form-item>
          <nut-button block type="primary">
            保存
          </nut-button>
        </nut-form-item>
      </nut-form>
    </nut-popup>
    <nut-dialog ref="dialogRef" @ok="handleLogout(true)" />
  </view>
</template>

<style lang="scss" scoped>
  .text {
    font-size: 28rpx;
    color: #999;
  }
  .title {
    font-size: 32rpx;
    padding: 35rpx 30rpx;
    border-bottom: 1px solid #eee;
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    border-top: 1px solid #eee;
    background-color: #fff;
  }
</style>
